
#question-wrap .question{
  overflow: hidden;
}

#question-wrap .question-show{
  animation-name: showing_question;
  animation-duration: .4s;
  max-height: var(--maxHeight);
}
@keyframes showing_question{
  from {
    max-height: 0;
  }
  to {
    max-height: var(--maxHeight);
  }
}

#question-wrap .hidden{
  max-height: 0;
  animation-name: hiding_question;
  animation-duration: .4s;
}
@keyframes hiding_question{
  from {
    max-height: var(--maxHeight);
  }
  to {
    max-height: 0;
  }
}

#question-wrap .line{
  margin-top: 24px;
  position: relative;
  width: 100%;
  border-top: 1px solid #1abc9c;
}

#question-wrap .line .arrow{
  position: absolute;
  width: 30px;
  height: 15px;
  left: 50%;
  top: -1px;
  margin-left: -15px;
  border-radius: 0 0 15px 15px;
  border: 1px solid #1abc9c;
  border-top: 1px solid white;
  font-size: 30px;
  cursor: pointer;
}

#question-wrap .line .arrow-down::before{
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translate(-50%, 0);
  transition: .3s linear;
}
#question-wrap .line .arrow-down:hover::before{
  transform: translate(-50%, -4px);
  color: #1abc9c;
}

#question-wrap .line .arrow-up::before{
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translate(-50%, 0) rotate(180deg);
  transition: .3s linear;
  animation-name: arrowRotate;
}

#question-wrap .line .arrow-up:hover::before{
  transform: translate(-50%, -4px) rotate(180deg);
  color: #1abc9c;
}

@keyframes arrowRotate{
  from{
    transform: translate(-50%, -4px);
  }
  to{
    transform: translate(-50%, -4px) rotate(180deg);
  }
}

#question-wrap .discription{
  width: 100%;
  position: relative;
}

#question-wrap .discription h3{
  margin-top: 14px;
}

#question-wrap .discription textarea{
  width: 99%;
  margin-top: 12px;
  color: #5a676f;
  outline: none;
  resize: none;
  border: 1px solid white;
}

#question-wrap .discription .title-selected{
  border: 1px solid blue;
}


#question-wrap .discription span{
  position: absolute;
  right: 30px;
  top: 10px;
  font-size: 20px;
  cursor: pointer;
}

#question-wrap .discription span:hover{
  color: blue;
}

#question-wrap .demo{

}

#question-wrap .demo h4{
  font-weight: 600;
  margin-top: 20px;
}

#question-wrap .demo-description{
  margin-top: 20px;
  background-color: #eaf0f5;
  padding: 10px 10px;
  line-height: 14px;
}

#question-wrap .demo-description h4{
  font-weight: 500;
  margin-top: 6px;
  overflow: hidden;
}
#question-wrap .demo-description .input-box{
  position: relative;
  overflow: hidden;
}
#question-wrap .demo-description .output-box{
  overflow: hidden;
  position: relative;
}

#question-wrap .demo-description span{
  position: absolute;
  right: 12px;
  top: 6px;
  cursor: pointer;
}

#question-wrap .demo-description span:hover{
  color: blue;
}

#question-wrap .demo-description .input{
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px 10px;
  background-color: #fafafa;
  border-left: 2px solid #1abc9c;
}

#question-wrap .demo-description .input-text{
  width: 99%;
  color: #5a676f;
  outline: none;
  resize: none;
  border: 1px solid white;
}

#question-wrap .demo-description .input-selected{
  border: 1px solid blue;
}
#question-wrap .demo-description .output{
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px 10px;
  background-color: #fafafa;
  border-left: 2px solid #1abc9c;
}

#question-wrap .demo-description .output-text{
  width: 99%;
  color: #5a676f;
  outline: none;
  resize: none;
  border: 1px solid white;
}
#question-wrap .demo-description .output-selected{
  border: 1px solid blue;
}